// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 导航栏滚动效果
    const navbar = document.querySelector('.navbar');
    
    window.addEventListener('scroll', function() {
        if (window.scrollY > 50) {
            navbar.style.background = 'rgba(255, 255, 255, 0.98)';
            navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
        } else {
            navbar.style.background = 'rgba(255, 255, 255, 0.95)';
            navbar.style.boxShadow = 'none';
        }
    });

    // 移动端菜单切换
    const mobileMenuToggle = document.getElementById('mobileMenuToggle');
    const navMenu = document.getElementById('navMenu');
    
    if (mobileMenuToggle && navMenu) {
        mobileMenuToggle.addEventListener('click', function() {
            navMenu.classList.toggle('active');
            mobileMenuToggle.classList.toggle('active');
        });
    }

    // 平滑滚动到锚点
    const navLinks = document.querySelectorAll('a[href^="#"]');
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            
            if (targetElement) {
                const offsetTop = targetElement.offsetTop - 80; // 考虑导航栏高度
                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
            }
        });
    });

    // 产品展示标签页切换
    const tabButtons = document.querySelectorAll('.tab-btn');
    const demoInfo = document.querySelector('.demo-info');
    const productScreenshot = document.getElementById('productScreenshot');

    const tabContent = {
        clipboard: {
            image: 'images/clipboard-screenshot.png',
            title: '智能剪贴板管理',
            description: 'PersonalAssistant 提供直观易用的界面，让您轻松管理所有复制内容。支持多种格式，智能分类，快速检索。',
            features: [
                { label: '支持格式', value: '文本、图片、文件、代码' },
                { label: '存储容量', value: '无限制云端存储' },
                { label: '同步速度', value: '实时同步' }
            ]
        },
        ai: {
            image: 'images/transaction-screenshot.png',
            title: '财务交易管理',
            description: '强大的财务管理功能，帮助您记录和分析每一笔交易。支持多种交易类型，提供详细的统计分析。',
            features: [
                { label: '交易类型', value: '收入、支出、转账、投资' },
                { label: '数据分析', value: '多维度图表统计' },
                { label: '数据安全', value: '本地加密存储' }
            ]
        },
        settings: {
            image: 'images/screenshot-settings.png',
            title: '个性化设置',
            description: '自定义快捷键操作，批量处理功能，与常用软件深度集成，打造个性化工作环境。',
            features: [
                { label: '快捷键', value: '完全自定义' },
                { label: '主题样式', value: '10+ 精美主题' },
                { label: '插件支持', value: '丰富的扩展生态' }
            ]
        }
    };

    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            // 移除所有活动状态
            tabButtons.forEach(btn => btn.classList.remove('active'));
            // 添加当前按钮的活动状态
            this.classList.add('active');
            
            // 获取标签页内容
            const tabId = this.getAttribute('data-tab');
            const content = tabContent[tabId];
            
            if (content) {
                // 更新图片
                if (productScreenshot && content.image) {
                    productScreenshot.src = content.image;
                    productScreenshot.alt = content.title;
                }

                // 更新文本内容
                if (demoInfo) {
                    const title = demoInfo.querySelector('h3');
                    const description = demoInfo.querySelector('p');
                    const features = demoInfo.querySelector('.demo-features');

                    if (title) title.textContent = content.title;
                    if (description) description.textContent = content.description;

                    if (features) {
                        features.innerHTML = content.features.map(feature => `
                            <div class="demo-feature">
                                <span class="feature-label">${feature.label}</span>
                                <span class="feature-value">${feature.value}</span>
                            </div>
                        `).join('');
                    }
                }
            }
        });
    });

    // 滚动动画效果
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);

    // 为需要动画的元素添加观察
    const animatedElements = document.querySelectorAll('.feature-card, .download-card, .step-item');
    animatedElements.forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(30px)';
        el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(el);
    });

    // 数字计数动画
    function animateCounter(element, target, duration = 2000) {
        let start = 0;
        const increment = target / (duration / 16);
        
        function updateCounter() {
            start += increment;
            if (start < target) {
                element.textContent = Math.floor(start).toLocaleString();
                requestAnimationFrame(updateCounter);
            } else {
                element.textContent = target.toLocaleString();
            }
        }
        
        updateCounter();
    }

    // 为统计数字添加动画（如果有的话）
    const counters = document.querySelectorAll('.counter');
    counters.forEach(counter => {
        const target = parseInt(counter.getAttribute('data-target'));
        if (target) {
            const counterObserver = new IntersectionObserver(function(entries) {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        animateCounter(counter, target);
                        counterObserver.unobserve(counter);
                    }
                });
            });
            counterObserver.observe(counter);
        }
    });

    // 添加页面加载动画
    document.body.style.opacity = '0';
    document.body.style.transition = 'opacity 0.5s ease';
    
    setTimeout(() => {
        document.body.style.opacity = '1';
    }, 100);
});

// 工具函数：节流
function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    }
}

// 工具函数：防抖
function debounce(func, wait, immediate) {
    let timeout;
    return function() {
        const context = this, args = arguments;
        const later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        const callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}
